<template>
<div class="main" ref="main"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: "ProgessEchart",
  props:['data'],
  data(){
    return{
      chart:null,
      }
    },
  mounted(){
    this.chart=echarts.init(this.$refs.main)
    this.chart.setOption({
      xAxis:{
        show:false,
        min:0,
        max:100,
      },
      yAxis:{
        show:false,
        type:'category'
      },
      series:[{
        type:'bar',
        data:[`${this.data}`],
        color:'#34ab01',
        //柱条的宽度
        barWidth:14,
        showBackground:true,
        backgroundStyle:{
          color:'#eee',
        },
        //标签
        label:{
          show:true,
          formatter:'|',
          position:'right',
          fontSize:18,
        }
      }],
      grid:{
        top:0,
        bottom:0,
        left:0,
        right:0,
      },
      tooltip:{},
    })
  },
  watch: {
    data(){
      this.chart.setOption({
        series:[{
          data:[`${this.data}`]
        }]
      })
    }
  },
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  }
</style>
